<template>
  <div class="p-4">
    <Card class="layout-card" title="福利详情">
      <Descriptions bordered :column="3" size="small">
        <DescriptionsItem label="福利名称">
          {{ welfare.name }}
        </DescriptionsItem>
        <DescriptionsItem label="福利类别">
          {{ welfare.type }}
        </DescriptionsItem>
        <DescriptionsItem label="有效期">
          {{ welfare.time }}
        </DescriptionsItem>
        <DescriptionsItem label="使用说明">
          {{ welfare.desc }}
        </DescriptionsItem>
        <DescriptionsItem label="福利状态">
          {{ welfare.status }}
        </DescriptionsItem>
        <DescriptionsItem label="已报名人数">
          {{ welfare.number }}
        </DescriptionsItem>
      </Descriptions>
    </Card>
    <Card class="layout-card mt-4">
      <Button @click="$router.go(-1)"> 返回 </Button>
    </Card>
  </div>
</template>

<script lang="ts" setup>
import { Descriptions, DescriptionsItem, Card, Button } from 'ant-design-vue';

const welfare = {
  name: '协会瑜伽体验课',
  type: '协会福利',
  time: '10月20日 下午3:00-5:00',
  address: '健康中心',
  desc: '免费体验瑜伽课程，让你体验到瑜伽的魅力',
  process: '报名-签到-体验-评价-结业',
  status: '已满员',
  number: '30',
};
</script>
